<template>
  <div class="hello">
    <p class="expertList"><img src="../assets/title10010.png" /></p>
    <ul class="oUl">

        <li class="active_a" @click="clickas($event)">单一采购</li>
        <li @click="clickas($event)">采购及安装</li>
        <li @click="clickas($event)">纯劳务</li>
        <li class="active_B" @click="clickas($event)">专业分包</li>
        <!--<li  class="active_B" @click="clickas($event)">其他</li>-->

      </ul>

      <ul class="oUl2" v-if="miss">
          <li v-for="item in  items">

              <div class="leftUl">
                <p>{{item.projectName}}</p>
                <p>报名截止时间：<span>{{format(item.endDate,'yyyy-MM-dd HH:mm:ss')}}</span></p>
              </div>

              <div class="rightUl"><router-link :to="{path:'/Tenderhall',query: { id:item.id}}">查看详情</router-link></div>
              <div class="rightUl2">{{format(item.startTime,'yyyy-MM-dd')}}</div>

        </li>

       </ul>
    <ul class="oUl2" v-if="!miss">

          <img style="width:100%;height:100%;" src="../assets/qq1010.png" />
    </ul>
       <p class="moreXQ"><router-link :to="{path:'/Tenderhalllist'}">查看更多</router-link></p>
  </div>
</template>

<script>

  export default {

    data () {
      return {
        items:[
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"},
          {projectName:"国家质检局标准与技术法规研究中心【灯具及开关】",endDate:"201777",id:"2018.7.7"}
        ],
        classification:'',
        miss:true
      }
    },
    methods: {
      clickas:function(e){
          $(e.currentTarget).addClass("active_a").siblings().removeClass('active_a');
          if( $(e.currentTarget).index()==0){
              this.classification=2
          }else if( $(e.currentTarget).index()==1){
            this.classification=3
          }else if( $(e.currentTarget).index()==2){
            this.classification=4
          }else if( $(e.currentTarget).index()==3){
            this.classification=5
          }else if($(e.currentTarget).index()==4){
            this.classification=1
          }
        this.butnbase(this.classification,8,1)

       },
      butnbase(list,countt,pagee){
        let that=this
        $.ajax({
          type: "post",
          url: local+"/awm/tender/selectListTender",
          data: {
            tenderId:' ',
            classification:list,
            count:countt,
            page:pagee
          },
          dataType: "json",
          beforeSend:function (xhr) {
            xhr. withCredentials=true
          },
          success: function(data){
            console.log(data)
            that.counts=data.resultData.count
            if(data.resultData.list.length>0){
              that.items=data.resultData.list
              that.miss=true
            }else{
              that.miss=false
            }

          },
          error:function(aa){
            console.log(aa)
          }
        });
      },
      format(time, format) {
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? '0' : '') + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
          switch(a){
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },
    },
    mounted () {
      this.butnbase(2,8,1)
    }
  }
</script>

<style scoped>
  .hello {
    width: 1200px;
    min-height: 1020px;
    margin: 0 auto;
    background: url(../assets/bglist.png);
    padding-bottom:30px;
    background-size: cover;
  }
  .expertList{
  height:136px;
  color:#fff;
  text-align:center;
  line-height:130px;
  font-size:40px;

}
.expertList span{
    margin-bottom:-7px;
    margin-right:24px;
    display:inline-block;
    width: 9px;
    height: 40px;
    background: #ff8329;
}
.oUl{

    margin:0 auto;
    width:1150px;
    height:53px;
    overflow: auto;
    zoom: 1;

 }
 .oUl li {
   width: 276px;
   margin-right: 14px;
   height: 53px;
   line-height: 53px;
   background: #e8e8e8;
   float: left;
   font-size: 21px;
   font-weight: 700;
 }
  .oUl li:nth-child(1){
    margin-left: 2px;
  }

.oUl li:hover{
  cursor: pointer;
  }
  .oUl .active_a{
    color:#ff8328;
    background:#fff;
  }
.oUl .active_B{
    margin-right:0px;
  }
 .oUl2{
    margin:0 auto;
    width:1146px;
    min-height:760px;
    background:#fff;

  }
  .oUl2 li{
    width:1080px;
    height:65px;
    padding-top:25px;
    border-bottom:1px dashed #c9c9c9;
    overflow: hidden;
    zoom: 1;
    margin-left:30px
  }
  .oUl2 li .leftUl{
    width:575px;
    float:left;
    text-align:left;

  }
  .oUl2 li .leftUl p{
    width:575px;
    text-align:left;

  }
  .oUl2 li .leftUl p:nth-child(1){
    line-height: 38px;
    font-size: 17px;
    font-weight: 500;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .oUl2 li .leftUl p:nth-child(2){
    line-height: 20px;
  }
  .oUl2 li .leftUl p span{
    color:#c92524;

  }
  .oUl2 li .rightUl{
    width:126px;
    float:right;
    height:38px;
    line-height:38px;
    background:#ff8329;
    border-radius:5px;
  }
  .oUl2 li .rightUl a{
    font-size:16px;
    color:#fff;

  }
  .oUl2 li .rightUl2{
    width:175px;
    float:right;
    margin-right:130px;
    height:65px;
    line-height:35px;
    font-size:18px;
  }
  .moreXQ{
    margin:0 auto;
    width:1096px;
    height:75px;
    background:#fff;
    line-height:75px;
    text-align:right;
    padding-right:50px;
  }
  .moreXQ a{
    font-size:18px;
  }
</style>


